<template>
  <div>
    <div class="top-sx">
      <ul>
        <li>
          <span>时间:</span>
          <a-date-picker @change="conditionChange" placeholder="请选择日期" v-model:value="pagingObj.selectTime"/>
        </li>
        <li>
          <span>状态:</span>
          <a-select
              ref="select"
              v-model:value="pagingObj.optionOrderStatus"
              style="width: 120px"
              @focus="focus"
              @change="conditionChange">
            <a-select-option value="0">未接</a-select-option>
            <a-select-option value="1">已接</a-select-option>
          </a-select>
        </li>
        <li>
          <span>快递类型:</span>
          <a-select
              ref="select"
              v-model:value="pagingObj.deliveryStatus"
              style="width: 120px"
              @focus="focus"
              @change="conditionChange">
            <a-select-option value="圆通快递">圆通快递</a-select-option>
            <a-select-option value="邮政快递">邮政快递</a-select-option>
          </a-select>
        </li>
      </ul>
    </div>
    <div>
      <ul>
        <li v-for="(item,index) in deData" :key="index+'de'">
          <a-card>
            <div class="content">
              <div class="item">
                <div class="title">
                  <h3>【{{ item.userNick }}】-{{ item.building }}</h3>
                  <h3>【{{ item.type }}】-{{ item.suggest }}</h3>
                </div>
                <div class="price">
                  <h2>￥{{ item.price }}</h2>
                </div>
                <div class="status">
                  <a-tag v-if="item.status==0" color="#87d068">
                    未接
                  </a-tag>
                  <a-tag v-if="item.status==1" color="#cd201f">
                    已接
                  </a-tag>
                  <a-tag v-if="item.status==2" color="#cd201f">
                    完成
                  </a-tag>
                </div>
                <div class="btn">
                  <a-button v-if="item.status==0" type="primary" @click="cancelTask(item.id)">撤单</a-button>
                  <a-button v-if="item.status==1" type="info" @click="confirmTask(item.id)">确认收货</a-button>
                </div>
              </div>
              <div class="endTime">
                <h3 style="display: inline-block">【截止时间】</h3><span style="color: red">{{ item.endTime }}</span>
              </div>
              <div class="receiveUserNick">
                <h3>【接单人:<span style="color: red">{{ item.receiveTaskUserName }}</span>】 </h3>
              </div>
            </div>
          </a-card>
        </li>
      </ul>
    </div>
    <div>
      <div>
        <a-empty description="无数据" v-if="deData.length==0"/>
        <a-pagination
            v-model:current="pagingObj.page"
            v-model:page-size="pagingObj.limit"
            :total="pagingObj.totalCount"
            @change="pageChange"/>
      </div>
    </div>
  </div>
</template>

<script>
import {message} from "ant-design-vue";

export default {
  name: "mySendTask",
  data() {
    return {
      deData: [],
      pagingObj: {
        selectTime: null,
        optionOrderStatus: null,
        deliveryStatus: '',
        page: 1,
        limit: 5,
        totalCount: 0,
        totalPage: 0
      }
    }
  },
  methods: {
    conditionChange() {
      this.getListData()
    },
    pageChange(current, pageSize) {
      this.getListData()
    },
    searchDelivery() {
      this.getListData()
    },
    getListData() {
      this.$httpPost("xy/delivery/sendTaskList", this.pagingObj).then(res => {
        console.log(res)
        if (res.data.code == 0) {
          let page = res.data.page;
          this.pagingObj.page = page.currPage
          this.pagingObj.totalCount = page.totalCount
          this.pagingObj.totalPage = page.totalPage
          this.deData = page.list
        }
      })
    },
    cancelTask(id) {
      this.$httpPost("xy/delivery/cancelTask", id).then(res => {
        if (res.data.code == 0) {
          message.success("撤单成功")
        } else {
          message.error("服务器繁忙...")
        }
        this.getListData()
      })
    },
    confirmTask(id) {
      this.$httpPost("xy/delivery/confirmTask", id).then(res => {
        if (res.data.code == 0) {
          message.success("确认收货成功")
        } else {
          message.error("服务器繁忙...")
        }
        this.getListData()
      })
    }
  },
  created() {
    this.getListData()
  }
}
</script>

<style scoped>
.top-sx {
  background-color: aliceblue;
}

.top-sx ul li {
  display: inline-block;
  margin-right: 20px;
  height: 40px;
}

.content {
  /*解决孩子使用margin带动父亲移动的问题*/
  overflow: hidden;
  height: 140px;
  background-color: #e8e8e8;
}

.item {
  height: 80px;
  margin: 10px 0 10px 0;
}

.title {
  float: left;
  width: 450px;
  height: 60px;
  margin: 10px 0;
}

.price {
  float: left;
  height: 60px;
  width: 150px;
  margin: 10px 0;
  line-height: 60px;
  text-align: center;
}

.price h2 {
  color: red;
}

.status {
  width: 150px;
  float: left;
  height: 60px;
  margin: 10px 0;
  line-height: 60px;
  text-align: center;
}

.btn {
  float: left;
  height: 60px;
  margin: 10px 0;
  line-height: 60px;
  text-align: center;
}


.endTime {
  width: 250px;
  float: left;
}

.receiveUserNick {
  width: 500px;
  float: left;
}
</style>